<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html>
<head>
    <title>社交平台 - 发现精彩时刻</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #5B5FFF;
            --primary-light: #8A8AFF;
            --primary-dark: #3A3AFF;
            --secondary: #FF7D9C;
            --secondary-light: #FFA6BA;
            --secondary-dark: #FF507F;
            --accent: #722ED1;
            --success: #00B42A;
            --warning: #FF7D00;
            --danger: #F53F3F;
            --info: #86909C;
            --light: #F2F3F5;
            --dark: #1D2129;
            --white: #FFFFFF;
            --gray-100: #F7F8FA;
            --gray-200: #E5E6EB;
            --gray-300: #C9CDD4;
            --gray-400: #86909C;
            --gray-500: #4E5969;
            --gray-600: #272E3B;
            --gray-700: #1D2129;
        }

        /* 头像容器基础样式 */
        .avatar-container {
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            background-color: #f8f9fa;
        }

        /* 确保头像图片填充容器 */
        .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        /* 发布区头像专用样式 */
        .post-avatar {
            width: 48px;
            height: 48px;
            min-width: 48px;
            flex-shrink: 0;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            background-color: #f5f5f5;
        }

        .post-avatar .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.3s ease;
        }

        /* 左侧卡片头像特定尺寸 */
        .user-info-card .avatar-container {
            width: 96px !important;
            height: 96px !important;
            margin: 0 auto;
        }

        .post-creator-card .post-avatar {
            flex: 0 0 48px;
            margin-right: 12px;
        }

        .post-creator-card .avatar-frame {
            width: 100%;
            height: 100%;
            background-color: #f8f9fa;
            transition: all 0.3s ease;
        }

        .post-creator-card .avatar-frame:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* 动态流中的头像尺寸 */
        .post-avatar .avatar-container {
            width: 48px !important;
            height: 48px !important;
        }

        /* 推荐好友头像尺寸 */
        .recommend-friend-avatar .avatar-container {
            width: 40px !important;
            height: 40px !important;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
            background-color: var(--light);
            color: var(--gray-700);
            margin: 0;
            padding: 0;
        }

        /* 基础动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* 头像样式 */
        .avatar-xs {
            width: 24px;
            height: 24px;
        }

        .avatar-sm {
            width: 32px;
            height: 32px;
        }

        .avatar-md {
            width: 48px;
            height: 48px;
        }

        .avatar-lg {
            width: 64px;
            height: 64px;
        }

        .avatar-2xl {
            width: 80px;
            height: 80px;
        }

        /* 确保所有头像都是圆形并正确裁剪 */
        .avatar-xs, .avatar-sm, .avatar-md,
        .avatar-lg, .avatar-2xl {
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid white;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        /* 卡片样式 */
        .card {
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: none;
            margin-bottom: 20px;
            background-color: white;
        }

        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 16px 16px 0 0 !important;
            padding: 1.25rem 1.5rem;
        }

        /* ===== 左侧用户卡片调整 ===== */
        .user-info-card {
            padding-bottom: 1.5rem;
        }

        /* 统计数字区域 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            margin: 0 1.5rem 1.5rem;
        }

        .stats-item {
            text-align: center;
            padding: 0.75rem;
            background-color: var(--gray-100);
            border-radius: 0.75rem;
            transition: all 0.3s ease;
        }

        .stats-item:hover {
            background-color: var(--primary-light);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(91, 95, 255, 0.15);
        }

        .stats-item:hover .stats-number,
        .stats-item:hover .stats-label {
            color: white;
        }

        .stats-number {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.25rem;
        }

        .stats-label {
            font-size: 0.75rem;
            color: var(--gray-500);
        }

        /* 好友管理菜单 */
        .friend-menu {
            margin: 0 1rem 1.5rem;
        }

        .friend-menu-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            transition: all 0.3s ease;
            text-decoration: none;
            color: var(--gray-700);
        }

        .friend-menu-item:hover {
            background-color: var(--gray-100);
            transform: translateX(4px);
        }

        .friend-menu-icon {
            width: 1.25rem;
            text-align: center;
            color: var(--primary);
            margin-right: 0.75rem;
        }

        .friend-menu-text {
            flex: 1;
            font-size: 0.875rem;
        }

        .friend-menu-badge {
            background-color: var(--primary);
            color: white;
            font-size: 0.6875rem;
            padding: 0.125rem 0.5rem;
            border-radius: 1rem;
        }

        /* ===== 中间发布区域调整 ===== */
        /* 发布卡片 - 模仿微信朋友圈 */
        .post-creator-card {
            margin-bottom: 1.5rem;
            border-radius: 1rem;
            overflow: hidden;
        }

        .post-input-area {
            display: flex;
            padding: 1rem;
        }

        .post-avatar {
            flex: 0 0 3rem;
            margin-right: 1rem;
        }

        .post-textarea {
            flex: 1;
            min-height: 5rem;
            padding: 0.75rem;
            border: 1px solid var(--gray-200);
            border-radius: 0.75rem;
            resize: none;
            transition: all 0.3s ease;
            font-family: inherit;
            font-size: 0.9375rem;
        }

        .post-textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(91, 95, 255, 0.2);
            outline: none;
        }

        .post-actions {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            border-top: 1px solid var(--gray-100);
        }

        .post-action-btn {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 0.75rem;
            color: var(--gray-600);
            transition: all 0.3s ease;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.875rem;
        }

        .post-action-btn:hover {
            background-color: var(--gray-100);
            color: var(--primary);
        }

        .post-action-icon {
            margin-right: 0.5rem;
            font-size: 1.25rem;
        }

        /* 图片预览区域 */
        .image-preview-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            padding: 0 1rem 1rem;
        }

        .image-preview-item {
            position: relative;
            border-radius: 0.5rem;
            overflow: hidden;
            aspect-ratio: 1/1;
        }

        .image-preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .image-remove-btn {
            position: absolute;
            top: 0.25rem;
            right: 0.25rem;
            width: 1.5rem;
            height: 1.5rem;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .image-preview-item:hover .image-remove-btn {
            opacity: 1;
        }

        /* ===== 右侧推荐区域调整 ===== */
        /* 推荐卡片统一样式 */
        .recommend-card {
            margin-bottom: 1.5rem;
            border-radius: 1rem;
        }

        .recommend-card-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--gray-100);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .recommend-card-title {
            font-weight: 600;
            color: var(--gray-700);
            font-size: 1rem;
            margin: 0;
        }

        .recommend-card-more {
            font-size: 0.875rem;
            color: var(--primary);
            text-decoration: none;
        }

        .recommend-card-body {
            padding: 0.75rem;
        }

        /* 推荐好友项 */
        .recommend-friend-item {
            display: flex;
            align-items: center;
            padding: 0.75rem;
            border-radius: 0.75rem;
            transition: all 0.3s ease;
            margin-bottom: 0.5rem;
        }

        .recommend-friend-item:last-child {
            margin-bottom: 0;
        }

        .recommend-friend-item:hover {
            background-color: var(--gray-100);
        }

        .recommend-friend-avatar {
            flex: 0 0 2.5rem;
            margin-right: 0.75rem;
        }

        .recommend-friend-info {
            flex: 1;
            min-width: 0;
        }

        .recommend-friend-name {
            font-weight: 500;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.9375rem;
        }

        .recommend-friend-mutual {
            font-size: 0.75rem;
            color: var(--gray-500);
        }

        .recommend-friend-btn {
            flex: 0 0 2rem;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: var(--primary);
            background-color: rgba(91, 95, 255, 0.1);
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .recommend-friend-btn:hover {
            background-color: var(--primary);
            color: white;
        }

        /* 热门话题项 */
        .topic-item {
            padding: 0.75rem;
            border-radius: 0.75rem;
            transition: all 0.3s ease;
            margin-bottom: 0.5rem;
        }

        .topic-item:last-child {
            margin-bottom: 0;
        }

        .topic-item:hover {
            background-color: var(--gray-100);
        }

        .topic-name {
            font-weight: 500;
            color: var(--primary-dark);
            margin-bottom: 0.25rem;
            font-size: 0.9375rem;
        }

        .topic-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: var(--gray-500);
        }

        /* 活跃用户项 */
        .active-user-item {
            display: flex;
            align-items: center;
            padding: 0.75rem;
            border-radius: 0.75rem;
            transition: all 0.3s ease;
            margin-bottom: 0.5rem;
        }

        .active-user-item:last-child {
            margin-bottom: 0;
        }

        .active-user-item:hover {
            background-color: var(--gray-100);
        }

        .active-user-avatar {
            flex: 0 0 2.5rem;
            margin-right: 0.75rem;
            position: relative;
        }

        .active-user-status {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 50%;
            border: 2px solid white;
            background-color: var(--success);
        }

        .active-user-info {
            flex: 1;
            min-width: 0;
        }

        .active-user-name {
            font-weight: 500;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.9375rem;
        }

        .active-user-activity {
            display: flex;
            align-items: center;
            font-size: 0.75rem;
            color: var(--gray-500);
        }

        .active-user-score {
            margin-left: 0.25rem;
            color: var(--warning);
        }

        .active-user-follow-btn {
            flex: 0 0 2rem;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: var(--primary);
            background-color: rgba(91, 95, 255, 0.1);
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .active-user-follow-btn:hover {
            background-color: var(--primary);
            color: white;
        }

        /* 响应式调整 */
        @media (max-width: 991.98px) {
            .col-lg-3 {
                margin-bottom: 1.5rem;
            }
        }

        /* 分页样式 */
        .pagination .page-item.active .page-link {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            border: none;
            box-shadow: 0 4px 12px rgba(91, 95, 255, 0.3);
        }

        .pagination .page-link {
            border-radius: 50% !important;
            margin: 0 3px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-600);
            border: none;
            background-color: transparent;
        }

        .pagination .page-link:hover {
            background-color: var(--gray-100);
        }

        /* 点赞动画 */
        @keyframes heartBeat {
            0% { transform: scale(1); }
            25% { transform: scale(1.2); }
            50% { transform: scale(1); }
            75% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        .like-btn.liked i.fa-heart {
            animation: heartBeat 0.8s;
            color: #ef4444;
        }

        .view-likes:hover {
            text-decoration: underline;
            color: #3b82f6;
        }

        /* ===== 评论样式 ===== */
        .comment-section {
            margin-top: 15px;
            border-top: 1px solid #f0f0f0;
            padding-top: 15px;
        }

        .comment-item {
            display: flex;
            padding: 8px 0;
        }

        .comment-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 10px;
            flex-shrink: 0;
        }

        .comment-content {
            flex-grow: 1;
            background-color: #f0f2f5;
            border-radius: 18px;
            padding: 8px 12px;
        }

        .comment-author {
            font-weight: 600;
            margin-right: 5px;
        }

        .comment-text {
            word-break: break-word;
        }

        .comment-time {
            font-size: 12px;
            color: #8e8e8e;
            margin-top: 4px;
        }

        .comment-input-container {
            display: flex;
            margin-top: 10px;
            padding: 8px 0;
        }

        .comment-input {
            flex-grow: 1;
            border: none;
            background-color: #f0f2f5;
            border-radius: 18px;
            padding: 8px 15px;
            font-size: 14px;
            outline: none;
        }

        .comment-input:focus {
            background-color: #e4e6e9;
        }

        .comment-submit-btn {
            background: none;
            border: none;
            color: #1877f2;
            font-weight: 600;
            cursor: pointer;
            padding: 8px 15px;
            margin-left: 5px;
        }

        .comment-submit-btn:disabled {
            color: #bcc0c4;
            cursor: not-allowed;
        }

        .comment-modal .modal-content {
            border-radius: 12px;
            overflow: hidden;
        }

        .comment-modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e4e6e9;
        }

        .comment-modal-body {
            max-height: 60vh;
            overflow-y: auto;
            padding: 15px;
        }

        .comment-modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #e4e6e9;
        }

        .comments-loading {
            text-align: center;
            padding: 20px;
            color: #8e8e8e;
        }

        /* 新增模态框样式 */
        .comment-modal .modal-dialog {
            max-width: 600px;
        }

        .comment-modal .modal-content {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .comment-modal .modal-header {
            background-color: var(--primary);
            color: white;
            padding: 15px 20px;
            border-bottom: none;
        }

        .comment-modal .modal-title {
            font-weight: 600;
            font-size: 1.1rem;
        }

        .comment-modal .modal-body {
            padding: 20px;
        }

        .comment-modal .comment-list {
            max-height: 400px;
            overflow-y: auto;
            padding-right: 10px;
            margin-bottom: 20px;
        }

        .comment-modal .comment-item {
            border-radius: 10px;
            background-color: #f8f9fa;
            padding: 12px 15px;
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .comment-modal .comment-item:hover {
            background-color: #e9ecef;
            transform: translateY(-2px);
        }

        .comment-modal .comment-header {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .comment-modal .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
            border: 2px solid white;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .comment-modal .comment-author {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--dark);
        }

        .comment-modal .comment-time {
            font-size: 0.8rem;
            color: var(--gray-500);
            margin-left: auto;
        }

        .comment-modal .comment-content {
            font-size: 0.95rem;
            line-height: 1.5;
            color: var(--gray-700);
            padding-left: 46px;
        }

        .comment-modal .input-group {
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--gray-300);
        }

        .comment-modal textarea {
            border: none;
            resize: none;
            min-height: 80px;
            padding: 12px;
            font-size: 0.95rem;
        }

        .comment-modal textarea:focus {
            box-shadow: none;
            border-color: transparent;
        }

        .comment-modal .btn-primary {
            border-radius: 0;
            background-color: var(--primary);
            border-color: var(--primary);
            padding: 0 20px;
        }

        .comment-modal .btn-primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }

        .no-comments {
            text-align: center;
            padding: 30px 0;
            color: var(--gray-500);
        }

        .no-comments i {
            font-size: 3rem;
            margin-bottom: 15px;
            opacity: 0.5;
        }
    </style>
</head>

<body>
<!-- 包含导航部分 -->
<jsp:include page="header.jsp"/>

<!-- 顶部导航与页面标题 -->
<div class="bg-gradient-to-r from-primary to-secondary text-white py-6 shadow-lg">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <h1 class="display-5 fw-bold">社交动态</h1>
            <div class="d-flex gap-2">
                <c:if test="${totalPages > 1}">
                    <a href="${pageContext.request.contextPath}/home?type=${type}&page=${currentPage - 1}"
                       class="btn bg-white/10 hover:bg-white/20 text-white transition-all duration-300 px-4 py-2 rounded-lg shadow-md flex items-center">
                        <i class="fa fa-chevron-left me-2"></i>上一页
                    </a>
                </c:if>
                <c:if test="${totalPages > 1}">
                    <a href="${pageContext.request.contextPath}/home?type=${type}&page=${currentPage + 1}"
                       class="btn bg-white/10 hover:bg-white/20 text-white transition-all duration-300 px-4 py-2 rounded-lg shadow-md flex items-center">
                        下一页<i class="fa fa-chevron-right ms-2"></i>
                    </a>
                </c:if>
            </div>
        </div>
    </div>
</div>

<div class="container mt-6 mb-12">
    <div class="row">
        <!-- 左侧用户信息卡片 -->
        <div class="col-lg-3">
            <div class="sticky-top" style="top: 20px;">
                <div class="card rounded-2xl overflow-hidden shadow-xl animate-fade-in">
                    <div class="relative h-32 bg-gradient-to-r from-primary to-secondary">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark/60 to-transparent"></div>
                    </div>
                    <div class="px-6 pb-6 -mt-16 text-center">
                        <c:set var="avatarPath"
                               value="${not empty currentUser.avatar ? currentUser.avatar : '/images/default-avatar.png'}"/>

                        <div class="inline-block relative">
                            <!-- 添加 avatar-lg 类并限制容器尺寸 -->
                            <div class="avatar-container" style="width: 96px; height: 96px;">
                                <img src="${pageContext.request.contextPath}/${currentUser.avatar}?t=<%=System.currentTimeMillis()%>"
                                     class="avatar-img w-full h-full object-cover"
                                     alt="用户头像">
                            </div>
                            <div class="absolute -bottom-1 -right-1 bg-success w-6 h-6 rounded-full border-2 border-white flex items-center justify-center">
                                <i class="fa fa-circle text-xs text-white"></i>
                            </div>
                        </div>
                        <h3 class="mt-2 font-bold text-xl">${currentUser.nickname}</h3>
                        <p class="text-gray-500 text-sm">${currentUser.bio}</p>
                    </div>

                    <!-- 统计数字区域 -->
                    <div class="stats-grid">
                        <div class="stats-item">
                            <div class="stats-number">${friendCount}</div>
                            <div class="stats-label">好友</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-number">${stats.totalPosts}</div>
                            <div class="stats-label">动态</div>
                        </div>
                        <div class="stats-item">
                            <div class="stats-number">${stats.totalFriendships}</div>
                            <div class="stats-label">互动</div>
                        </div>
                    </div>

                    <!-- 好友管理菜单 -->
                    <div class="friend-menu">
                        <a href="<c:url value='/views/friend/friend_list.jsp'/>" class="friend-menu-item">
                            <div class="friend-menu-icon"><i class="fa fa-users"></i></div>
                            <div class="friend-menu-text">好友列表</div>
                            <span class="friend-menu-badge">${friendCount}</span>
                        </a>
                        <a href="<c:url value='/views/friend/friend_requests.jsp'/>" class="friend-menu-item">
                            <div class="friend-menu-icon"><i class="fa fa-envelope"></i></div>
                            <div class="friend-menu-text">好友请求</div>
                            <c:if test="${unreadRequests > 0}">
                                <span class="friend-menu-badge">${unreadRequests}</span>
                            </c:if>
                        </a>
                        <a href="<c:url value='/views/friend/search_friends.jsp'/>" class="friend-menu-item">
                            <div class="friend-menu-icon"><i class="fa fa-search"></i></div>
                            <div class="friend-menu-text">查找好友</div>
                        </a>
                    </div>

                    <div class="space-y-1 px-4 pb-4">
                        <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">日志分类</h4>
                        <a href="<c:url value='/views/home.jsp?type=all'/>"
                           class="flex items-center p-3 rounded-lg ${param.type == 'all' or empty param.type ? 'bg-primary/10 text-primary' : 'hover:bg-gray-100'} transition-all duration-200">
                            <i class="fa fa-globe w-5"></i>
                            <span class="ml-3">全部动态</span>
                        </a>
                        <a href="<c:url value='/views/home.jsp?type=public'/>"
                           class="flex items-center p-3 rounded-lg ${param.type == 'public' ? 'bg-primary/10 text-primary' : 'hover:bg-gray-100'} transition-all duration-200">
                            <i class="fa fa-unlock w-5"></i>
                            <span class="ml-3">公开日志</span>
                        </a>
                        <a href="<c:url value='/views/home.jsp?type=friends'/>"
                           class="flex items-center p-3 rounded-lg ${param.type == 'friends' ? 'bg-primary/10 text-primary' : 'hover:bg-gray-100'} transition-all duration-200">
                            <i class="fa fa-users w-5"></i>
                            <span class="ml-3">好友日志</span>
                        </a>
                        <a href="<c:url value='/views/home.jsp?type=mine'/>"
                           class="flex items-center p-3 rounded-lg ${param.type == 'mine' ? 'bg-primary/10 text-primary' : 'hover:bg-gray-100'} transition-all duration-200">
                            <i class="fa fa-user w-5"></i>
                            <span class="ml-3">我的日志</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间内容区 -->
        <div class="col-lg-6">
            <!-- 发布日志卡片 -->
            <div class="card post-creator-card animate-fade-in delay-100">
                <form action="<c:url value='/views/post/create_post.jsp'/>" method="post" id="postForm">
                    <div class="post-input-area">
                        <!-- 修改后的头像容器 -->
                        <div class="post-avatar">
                            <c:choose>
                                <c:when test="${not empty currentUser.avatar}">
                                    <picture>
                                        <source srcset="${pageContext.request.contextPath}${currentUser.avatar}"
                                                onerror="this.src='${pageContext.request.contextPath}/images/default-avatar.png'">
                                        <img src="${pageContext.request.contextPath}/images/default-avatar.png"
                                             class="avatar-img"
                                             alt="用户头像">
                                    </picture>
                                </c:when>
                                <c:otherwise>
                                    <img src="${pageContext.request.contextPath}/images/default-avatar.png"
                                         class="avatar-img"
                                         alt="用户头像">
                                </c:otherwise>
                            </c:choose>
                        </div>
                        <textarea class="post-textarea" name="content" placeholder="分享你的想法..." required id="postContent"></textarea>
                    </div>

                    <div id="imagePreview" class="image-preview-container"></div>

                    <div class="post-actions">
                        <button type="button" class="post-action-btn" id="uploadImageBtn">
                            <span class="post-action-icon"><i class="fa fa-image"></i></span>
                            <span>图片</span>
                        </button>
                        <button type="button" class="post-action-btn">
                            <span class="post-action-icon"><i class="fa fa-smile-o"></i></span>
                            <span>表情</span>
                        </button>
                        <button type="button" class="post-action-btn">
                            <span class="post-action-icon"><i class="fa fa-map-marker"></i></span>
                            <span>位置</span>
                        </button>
                        <button type="submit" class="post-action-btn" style="color: var(--primary);">
                            <span class="post-action-icon"><i class="fa fa-paper-plane"></i></span>
                            <span>发布</span>
                        </button>
                    </div>
                    <input type="file" id="imageUpload" accept="image/*" style="display: none;" multiple>
                </form>
            </div>

<%--            <!-- 调试信息 -->--%>
<%--            <div class="debug-info bg-yellow-50 p-4 mb-4 rounded-lg" style="display: none;">--%>
<%--                <h3 class="font-bold text-lg">调试信息</h3>--%>
<%--                <p>当前用户: ${currentUser.nickname} (ID: ${currentUser.userId})</p>--%>
<%--                <p>动态数量: ${debug_postsCount}</p>--%>
<%--                <p>最后一条动态ID: ${debug_lastPostId}</p>--%>
<%--                <p>posts对象: ${posts != null ? '非空' : '空'}</p>--%>
<%--            </div>--%>

            <!-- 动态流 -->
            <div id="postStream" class="space-y-6">
                <c:choose>
                    <c:when test="${not empty posts}">
                        <c:forEach items="${posts}" var="post">
                            <div class="card" data-post-id="${post.postId}">
                                <div class="p-6">
                                    <!-- 用户信息区 - 就是这里 ↓↓↓ -->
                                    <div class="post-header flex items-start">
                                        <div class="user-avatar-container mr-3">
                                            <img src="${not empty post.user.avatar ?
                                  (post.user.avatar.startsWith('http') ?
                                   post.user.avatar :
                                   pageContext.request.contextPath.concat(post.user.avatar)) :
                                  pageContext.request.contextPath.concat('/images/default-avatar.png')}"
                                                 class="user-avatar"
                                                 style="width: 40px; height: 40px; object-fit: cover; border-radius: 50%;"
                                                 alt="用户头像"
                                                 onerror="this.src='${pageContext.request.contextPath}/images/default-avatar.png'">
                                        </div>
                                        <div>
                                            <h4 class="font-semibold text-gray-900">${post.user.nickname}</h4>
                                            <p class="text-sm text-gray-500">
                                                <fmt:formatDate value="${post.createdAt}" pattern="yyyy-MM-dd HH:mm"/>
                                                <c:if test="${not empty post.location}">
                                                    <span class="mx-1">·</span>
                                                    <i class="fa fa-map-marker"></i>
                                                    <span>${post.location}</span>
                                                </c:if>
                                            </p>
                                        </div>
                                    </div>

                                    <!-- 日志内容 -->
                                    <p class="text-gray-800 mb-4">${post.content}</p>

                                    <!-- 修改后的图片区域 -->
                                    <!-- 图片区域 -->
                                    <c:if test="${not empty post.images}">
                                        <div class="image-grid">
                                            <c:forEach items="${post.images}" var="image">
                                                <div class="image-wrapper">
                                                    <!-- 添加调试信息 -->
<%--                                                    <c:out value="图片路径: ${image}" />--%>
                                                    <img src="${pageContext.request.contextPath}/${image}"
                                                         style="width:35%; height:200px; object-fit:cover; border-radius:8px; display:block;"
                                                         onerror="this.style.display='none'"
                                                         alt="日志图片">
                                                </div>

                                            </c:forEach>
                                        </div>
                                    </c:if>

                                    <!-- 点赞/评论/分享区（放在这里） -->
                                    <div class="pt-4 border-t border-gray-100">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center text-sm text-gray-500">
                                                <!-- 点赞人数显示，添加点击事件查看点赞列表 -->
                                                <span class="mr-3 cursor-pointer hover:underline view-likes"
                                                      data-post-id="${post.postId}">${post.likeCount} 人点赞</span>
                                                <!-- 修改评论计数显示 -->
                                                <span class="comment-count" data-post-id="${post.postId}">${post.commentCount} 条评论</span>
                                            </div>
                                        </div>

                                        <div class="grid grid-cols-3 gap-2 border-t pt-3">
                                            <!-- 修改点赞按钮结构 -->
                                            <button class="like-btn"
                                                    data-post-id="${post.postId}"
                                                    data-initial-state="${post.likedByCurrentUser ? 'liked' : 'unliked'}">
                                                <i class="fa ${post.likedByCurrentUser ? 'fa-heart text-danger' : 'fa-heart-o'}"></i>
                                                <span>${post.likedByCurrentUser ? '已赞' : '点赞'}</span>
                                            </button>

                                            <!-- 修改评论按钮，添加data-post-id属性 -->
                                            <button class="comment-btn flex items-center justify-center py-2 text-gray-600 hover:text-blue-500 rounded-lg transition-all"
                                                    data-post-id="${post.postId}">
                                                <i class="fa fa-comment-o mr-2"></i>
                                                <span>评论</span>
                                            </button>

                                            <!-- 分享按钮 -->
                                            <button class="share-btn flex items-center justify-center py-2 text-gray-600 hover:text-green-500 rounded-lg transition-all">
                                                <i class="fa fa-share-alt mr-2"></i>
                                                <span>分享</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </c:forEach>
                    </c:when>
                    <c:otherwise>
                        <div class="empty-state bg-gray-50 rounded-lg p-8 text-center">
                            <i class="fa fa-newspaper-o text-4xl text-gray-400 mb-4"></i>
                            <h4 class="font-medium text-gray-700">暂无动态</h4>
                            <p class="text-gray-500 mt-2">
                                <c:choose>
                                    <c:when test="${empty posts}">
                                        服务器返回空数据 (debug_postsCount=0)
                                    </c:when>
                                    <c:otherwise>
                                        数据加载异常：posts对象存在但无内容
                                    </c:otherwise>
                                </c:choose>
                            </p>
                        </div>
                    </c:otherwise>
                </c:choose>
            </div>

            <c:if test="${not empty posts and totalPages > 1}">
                <div class="flex justify-center mt-8">
                    <div class="flex space-x-2">
                        <c:if test="${currentPage > 1}">
                            <a href="?page=${currentPage - 1}" class="px-4 py-2 border rounded-lg hover:bg-gray-100">上一页</a>
                        </c:if>

                        <c:forEach begin="1" end="${totalPages}" var="i">
                            <a href="?page=${i}" class="px-4 py-2 border rounded-lg ${i == currentPage ? 'bg-blue-500 text-white' : 'hover:bg-gray-100'}">${i}</a>
                        </c:forEach>

                        <c:if test="${currentPage < totalPages}">
                            <a href="?page=${currentPage + 1}" class="px-4 py-2 border rounded-lg hover:bg-gray-100">下一页</a>
                        </c:if>
                    </div>
                </div>
            </c:if>
        </div>

        <!-- 右侧推荐栏 -->
        <div class="col-lg-3">
            <div class="sticky-top" style="top: 20px;">
                <!-- 推荐好友 -->
                <div class="card recommend-card animate-fade-in delay-300">
                    <div class="recommend-card-header">
                        <h3 class="recommend-card-title">推荐好友</h3>
                        <a href="<c:url value='/views/friend/recommended.jsp'/>" class="recommend-card-more">查看更多</a>
                    </div>
                    <div class="recommend-card-body">
                        <c:choose>
                            <c:when test="${not empty recommendedFriends}">
                                <c:forEach items="${recommendedFriends}" var="friend">
                                    <div class="recommend-friend-item">
                                        <div class="recommend-friend-avatar">
                                            <img src="${not empty friend.avatar ? pageContext.request.contextPath.concat(friend.avatar) : pageContext.request.contextPath.concat('/images/default-avatar.png')}"
                                                 class="avatar-sm" alt="推荐好友头像">
                                        </div>
                                        <div class="recommend-friend-info">
                                            <div class="recommend-friend-name">${friend.nickname}</div>
                                            <div class="recommend-friend-mutual">${friend.mutualFriends} 共同好友</div>
                                        </div>
                                        <button class="recommend-friend-btn">
                                            <i class="fa fa-user-plus"></i>
                                        </button>
                                    </div>
                                </c:forEach>
                            </c:when>
                            <c:otherwise>
                                <div class="text-center py-4 text-gray-500 text-sm">
                                    暂无推荐好友
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>

                <!-- 热门话题 -->
                <div class="card recommend-card animate-fade-in delay-400">
                    <div class="recommend-card-header">
                        <h3 class="recommend-card-title">热门话题</h3>
                    </div>
                    <div class="recommend-card-body">
                        <c:choose>
                            <c:when test="${not empty hotTopics}">
                                <c:forEach items="${hotTopics}" var="topic">
                                    <a href="<c:url value='/views/topic/detail.jsp?id=${topic.id}'/>" class="topic-item">
                                        <div class="topic-name">#${topic.name}</div>
                                        <div class="topic-meta">
                                            <span>${topic.postCount} 条动态</span>
                                            <span>热度 ${topic.hotScore}</span>
                                        </div>
                                    </a>
                                </c:forEach>
                            </c:when>
                            <c:otherwise>
                                <div class="text-center py-4 text-gray-500 text-sm">
                                    暂无热门话题
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>

                <!-- 活跃用户 -->
                <div class="card recommend-card animate-fade-in delay-500">
                    <div class="recommend-card-header">
                        <h3 class="recommend-card-title">活跃用户</h3>
                    </div>
                    <div class="recommend-card-body">
                        <c:choose>
                            <c:when test="${not empty activeUsers}">
                                <c:forEach items="${activeUsers}" var="user">
                                    <div class="active-user-item">
                                        <div class="active-user-avatar">
                                            <img src="${not empty user.avatar ? pageContext.request.contextPath.concat(user.avatar) : pageContext.request.contextPath.concat('/images/default-avatar.png')}"
                                                 class="avatar-sm" alt="活跃用户头像">
                                            <c:if test="${user.online}">
                                                <div class="active-user-status"></div>
                                            </c:if>
                                        </div>
                                        <div class="active-user-info">
                                            <div class="active-user-name">${user.nickname}</div>
                                            <div class="active-user-activity">
                                                <i class="fa fa-fire text-warning"></i>
                                                <span class="active-user-score">${user.activityScore} 活跃度</span>
                                            </div>
                                        </div>
                                        <button class="active-user-follow-btn">
                                            <i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                </c:forEach>
                            </c:when>
                            <c:otherwise>
                                <div class="text-center py-4 text-gray-500 text-sm">
                                    暂无活跃用户
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 评论模态框 -->
<div class="modal fade comment-modal" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="commentModalLabel">评论</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 评论列表容器 -->
                <div id="commentList" class="comment-list">
                    <!-- 评论将通过AJAX动态加载 -->
                </div>

                <!-- 评论输入区域 -->
                <div class="input-group">
                    <textarea id="commentContent" class="form-control" placeholder="写下你的评论..." rows="3"></textarea>
                    <button id="submitCommentBtn" class="btn btn-primary" type="button">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- JavaScript -->
<script>
    // 全局变量定义
    const contextPath = "${pageContext.request.contextPath}" || "/Final_Project_war_exploded";
    let currentPostId = null;
    const commentModal = new bootstrap.Modal(document.getElementById('commentModal'));

    console.log("安全路径:", contextPath);

    // 点赞功能
    (function() {
        $(document).off('click', '.like-btn').on('click', '.like-btn', function(e) {
            e.stopPropagation();
            const $btn = $(this);
            const postId = $btn.closest('.card').data('post-id');

            $.ajax({
                url: contextPath + "/likes",
                method: 'POST',
                data: { postId: postId },
                dataType: 'json',
                success: (res) => {
                    if (res?.success) {
                        $btn.find('i.fa')
                            .toggleClass('fa-heart-o', !res.liked)
                            .toggleClass('fa-heart text-danger', res.liked)
                            .next('span').text(res.liked ? '已赞' : '点赞');

                        $btn.closest('.card')
                            .find('.view-likes')
                            .text(res.likeCount + ' 人点赞');
                    }
                },
                error: (xhr) => {
                    console.error("请求失败:", xhr.status);
                }
            });
        });
    })();

    // 图片上传预览
    document.getElementById('uploadImageBtn').addEventListener('click', function() {
        document.getElementById('imageUpload').click();
    });

    document.getElementById('imageUpload').addEventListener('change', function(e) {
        const previewContainer = document.getElementById('imagePreview');
        previewContainer.innerHTML = '';

        const files = e.target.files;
        if (files) {
            Array.from(files).forEach((file, index) => {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imgContainer = document.createElement('div');
                    imgContainer.className = 'image-preview-item';

                    const img = document.createElement('img');
                    img.src = e.target.result;

                    const removeBtn = document.createElement('button');
                    removeBtn.className = 'image-remove-btn';
                    removeBtn.innerHTML = '<i class="fa fa-times"></i>';
                    removeBtn.onclick = function() {
                        imgContainer.remove();
                    };

                    imgContainer.appendChild(img);
                    imgContainer.appendChild(removeBtn);
                    previewContainer.appendChild(imgContainer);
                };
                reader.readAsDataURL(file);
            });
        }
    });

    // 处理发布表单提交
    document.getElementById('postForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const content = document.getElementById('postContent').value;
        if (!content.trim()) {
            alert('请输入内容后再发布');
            return;
        }

        // 显示加载状态
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalContent = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>发布中...';

        // 模拟提交
        setTimeout(() => {
            this.reset();
            document.getElementById('imagePreview').innerHTML = '';
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalContent;
            alert('发布成功！');
        }, 1500);
    });

    // 查看点赞列表
    $(document).on('click', '.view-likes', function() {
        const postId = $(this).data('post-id');

        $.get('/likes', { postId: postId }, function(likes) {
            let html = '<div class="space-y-3">';

            if (likes.length === 0) {
                html += '<p class="text-center text-gray-500">暂无点赞</p>';
            } else {
                likes.forEach(like => {
                    html += `
                <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
                    <img src="${like.userAvatar || '/images/default-avatar.png'}"
                         class="w-10 h-10 rounded-full object-cover mr-3"
                         onerror="this.src='/images/default-avatar.png'">
                    <span class="font-medium">${like.userNickname}</span>
                </div>`;
                });
            }

            html += '</div>';

            // 使用SweetAlert显示模态框
            Swal.fire({
                title: '点赞用户',
                html: html,
                showConfirmButton: false,
                showCloseButton: true,
                width: '400px'
            });
        });
    });

    // 当评论按钮被点击时
    $(document).on('click', '.comment-btn', function() {
        currentPostId = $(this).data('post-id');

        // 打开模态框
        commentModal.show();

        // 加载评论
        loadComments(currentPostId);
    });

    // 加载评论函数
    function loadComments(postId) {
        console.log("contextPath的值是:", contextPath);

        $('#commentList').html(`
        <div class="d-flex justify-content-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
        </div>
    `);

        $.ajax({
            url: contextPath + "/comment",
            method: 'GET',
            data: { postId: postId },
            dataType: 'json',
            success: function(comments) {
                console.log("收到的评论数据:", comments);

                let html = '';

                if (comments.length > 0) {
                    comments.forEach((comment, index) => {
                        const avatarUrl = comment.userAvatar && comment.userAvatar !== ''
                            ? (comment.userAvatar.startsWith('http') ? comment.userAvatar : contextPath + comment.userAvatar)
                            : contextPath + '/images/default-avatar.png';

                        const nickname = comment.userNickname || '匿名用户';
                        const content = comment.content || '';
                        const createdAt = comment.createdAt ? new Date(comment.createdAt).toLocaleString('zh-CN', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: false
                        }).replace(/\//g, '-') : '';

                        console.log("评论[" + index + "]:", {
                            avatarUrl,
                            nickname,
                            content,
                            createdAt
                        });

                        html += '<div class="comment-item">' +
                            '<div class="comment-header">' +
                            '<img src="' + avatarUrl + '" class="comment-avatar" alt="用户头像">' +
                            '<div class="comment-author">' + nickname + '</div>' +
                            '<div class="comment-time">' + createdAt + '</div>' +
                            '</div>' +
                            '<div class="comment-content">' + content + '</div>' +
                            '</div>';
                    });
                } else {
                    html = `
                    <div class="no-comments">
                        <i class="fa fa-commenting-o"></i>
                        <p>暂无评论，成为第一个评论的人吧</p>
                    </div>
                `;
                }

                console.log("生成的HTML:", html);
                $('#commentList').html(html);
            },
            error: function(xhr, status, error) {
                console.error("评论加载失败", status, error);
                $('#commentList').html(`
                <div class="alert alert-danger" role="alert">
                    加载评论失败，请稍后再试
                </div>
            `);
            }
        });
    }





    // 提交评论
    $('#submitCommentBtn').click(function() {
        const content = $('#commentContent').val().trim();

        if (!content) {
            alert('评论内容不能为空');
            return;
        }

        $.ajax({
            url: contextPath + "/comment",
            method: 'POST',
            data: {
                postId: currentPostId,
                content: content
            },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // 清空输入框
                    $('#commentContent').val('');

                    // 重新加载评论
                    loadComments(currentPostId);

                    // 更新原帖的评论计数
                    const $commentCountSpan = $('.comment-count[data-post-id="' + currentPostId + '"]');
                    $commentCountSpan.text(response.commentCount + ' 条评论');

                    // 显示成功提示
                    const alertHtml = `
                        <div class="alert alert-success alert-dismissible fade show position-absolute top-0 end-0 m-3" role="alert">
                            评论成功！
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `;

                    $('#commentModal').append(alertHtml);

                    // 5秒后自动消失
                    setTimeout(() => {
                        $('.alert').alert('close');
                    }, 3000);
                } else {
                    alert('评论失败: ' + response.message);
                }
            },
            error: function() {
                alert('网络错误，请重试');
            }
        });
    });

    // 按回车发送评论（同时支持Shift+Enter换行）
    $('#commentContent').keypress(function(e) {
        if (e.which === 13 && !e.shiftKey) {
            e.preventDefault();
            $('#submitCommentBtn').click();
        }
    });

    // 模态框关闭时清空内容
    $('#commentModal').on('hidden.bs.modal', function() {
        $('#commentList').empty();
        $('#commentContent').val('');
        currentPostId = null;
    });

    // 初始化点赞按钮状态
    $('.like-btn').each(function() {
        const isLiked = $(this).data('liked') === 'true';
        const heartIcon = $(this).find('i.fa');
        heartIcon.toggleClass('fa-heart-o', !isLiked);
        heartIcon.toggleClass('fa-heart text-red-500', isLiked);
    });

    document.querySelector('.debug-info').style.display = 'block';
</script>

</body>
</html>